<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--一定要先引入vue.js再引入index.js因为elementui是基于vue.js实现的,如果不先引入vue.js elementui的js无用-->
    <script src="element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="js/axios-0.18.0.js"></script>


</head>
<body>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }
</style>
<div id="app">
    <el-container>
        <el-header style="font-size:40px;">
            -----------------------实验报告上传系统-----------------------
            <el-button type="info" size="mini" round @click="logout">退出登录</el-button>

        </el-header>

        <el-container>
            <el-aside width="200px">
                <!--左侧导航栏-->
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>作业和文件管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="ToTeacherHome">个人主页</el-menu-item>
                            <el-menu-item index="1-2" @click="">课程管理</el-menu-item>
                            <el-menu-item index="1-3" @click="ToHomework">作业项目管理</el-menu-item>
                            <el-menu-item index="1-4" @click="ToStuFile">作业文件管理</el-menu-item>

                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

            </el-aside>
            <el-main>
                <!--添加表单-->
                <div align="right" >
                    <el-button type="primary"
                               @click="dialogFormVisible = true">新增课程</el-button>
                </div>

                <el-dialog title="新增作业项目" :visible.sync="dialogFormVisible">
                    <el-form :model="addForm">

                        <el-form-item label="课程号" label-width="120px">
                            <el-input v-model="addForm.cno" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="课程名称" label-width="120px">
                            <el-input v-model="addForm.cname" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="学年" label-width="120px" align="left">
                            <el-select v-model="addForm.cyear" placeholder="学年" >
                                <el-option label="2022-2023" value="2022-2023"></el-option>
                                <el-option label="2023-2024" value="2023-2024"></el-option>
                                <el-option label="2024-2025" value="2024-2025"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="学期" label-width="120px" align="left">
                            <el-select v-model="addForm.cterm" placeholder="学期" >
                                <el-option label="第一学期" :value="1"></el-option >
                                <el-option label="第二学期" :value="2"></el-option>
                            </el-select>
                        </el-form-item>


                    <!--    <el-form-item label="班级" label-width="120px" prop="addForm.classId" align="left">
                            <el-select
                                    v-model="addForm.classId"
                                    placeholder="请选择班级"
                            >
                                <el-option v-for="(item,index) in ClassTableData" :key="index" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>-->


                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addHandle">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="导入课程学生数据" :visible.sync="importStuToCourseDialogFormVisible">
                <!--上传文件表单-->
                <el-form :model="importStuToCourseForm">
                    <h3>请上传学生名单(excel表格)</h3>
                    <el-form-item >
                        <el-upload
                                class="upload-demo"
                                action="/sc/importStuToCourse"
                                :data="importStuToCourseForm"
                                :on-success="uploadSuccess"
                                accept=".xlsx"
                                multiple
                                :limit="3"
                                :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                    <div slot="footer" class="dialog-footer">
                    </div>
                </el-form>
                </el-dialog>

                <!--表格-->
                <el-table :data="courseTableData" border>

                    <el-table-column prop="cno" label="课程号" width="120">
                    </el-table-column>
                    <el-table-column prop="cname" label="课程名" width="120">
                    </el-table-column>
                    <el-table-column prop="cyear" label="学年" width="120">
                    </el-table-column>
                    <el-table-column prop="cterm" label="学期" width="240">
                        <template slot-scope="scope">
                            {{scope.row.cterm==1?"第一学期":"第二学期"}}
                        </template>
                    </el-table-column>

                    <el-table-column  label="操作">
                        <template slot-scope="scope">
                        <el-button type="primary" plain @click="selectById(scope.row.cno)">编辑</el-button>
                            <!--编辑对话框表单-->
                            <el-dialog title="修改班级信息" :visible.sync="updateDialogFormVisible">
                                <el-form :model="updateForm">
                                    <el-form-item label="课程号" label-width="120px">
                                        <el-input v-model="updateForm.cno" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="课程名称" label-width="120px">
                                        <el-input v-model="updateForm.cname" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="最大选课人数" label-width="120px">
                                        <el-input v-model="updateForm.maxNum" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="当前选课人数" label-width="120px">
                                        <el-input v-model="updateForm.curNum" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="是否开放选课" label-width="120px">
                                        <el-select  v-model="updateForm.canSelect" >
                                            <el-option label="开放选课" :value="1"></el-option>
                                            <el-option label="禁止选课" :value="0"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="学年" label-width="120px" >
                                        <el-select v-model="updateForm.cyear" placeholder="学年" >
                                            <el-option label="2022-2023" value="2022-2023"></el-option>
                                            <el-option label="2023-2024" value="2023-2024"></el-option>
                                            <el-option label="2024-2025" value="2024-2025"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="学期" label-width="120px">
                                        <el-select v-model="updateForm.cterm" placeholder="学期" >
                                            <el-option label="第一学期" :value="1"></el-option >
                                            <el-option label="第二学期" :value="2"></el-option>
                                        </el-select>
                                    </el-form-item>

                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="updateDialogFormVisible=false">取 消</el-button>
                                    <el-button type="primary" @click="updateById(scope.row.cno)">确 定</el-button>
                                </div>

                            </el-dialog>

                        <el-button type="danger" plain @click="deleteHandle(scope.row.cno)">删除</el-button>
<!--                            导入学生名单-->
                        <el-button type="success" plain @click="importStuToCourse(scope.row.cno)">导入学生</el-button>
                        </template>
                    </el-table-column>



                </el-table>

            </el-main>
        </el-container>
    </el-container>

</div>

</body>
</html>

<script>

    new Vue({
        el: "#app",
        data: {
            importStuToCourseDialogFormVisible: false,
            importStuToCourseForm: {
                cno:'6'
            },
            ClassTableData:[],
            updateDialogFormVisible: false,
            dialogFormVisible: false,
            dialogVisible: false,
            page: 1,
            pageSize: 10,
            courseTableData: [{
                Cno:'9',
                Cname:'aaa',
                cYear:'22',
                cTerm:'1'
            }],
            addForm: {
                cno: '',
                cname: '',
                cyear: '',
                cterm: ''
            },
            updateForm: {
                cno: '',
                cname: '',
                cyear: '',
                cterm: ''
            }
        },
        methods: {
            uploadSuccess(res){
                //不能要data 不然获取不到code,应该是对其原本返回数据进行了封装这里的res=res.data
                if (res.code === 1) {
                    this.$message.success('导入成功');
                    this.importStuToCourseDialogFormVisible=false;
                } else {
                    this.$message.error(res.msg +'  请勿重复导入相同学生')
                }
            },
            importStuToCourse(cno){
                this.importStuToCourseDialogFormVisible=true;
                this.importStuToCourseForm.cno=cno;

            },
            logout(){
                axios.get("/logout").then(res=>{
                    if (res.data.code === 1) {
                        localStorage.removeItem("user");
                        window.location.href = 'login.html';
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }

                })
            },
            updateById(cno){
                this.updateDialogFormVisible=false;
                axios.put("/course",{
                     ...this.updateForm
                }).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('修改成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectCourse();
                })
            },
            selectById(cno){
                this.updateDialogFormVisible=true;
                axios.get("/course/"+cno).then(res=>{
                    this.updateForm=res.data.data;
                })
            },
            addHandle(){
                this.dialogFormVisible=false;
                axios.post("/course",{
                    ...this.addForm
                }).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('添加成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectCourse();
                })
            },
            deleteById(cno){
                axios.delete("/course/"+cno).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('删除成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.selectCourse();
                })
            },
            deleteHandle(cno){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                   this.deleteById(cno);
                })

            },
            ToStuFile() {
                window.location.href = 'stuFile.html';
            },
            ToTeacherHome(){
                window.location.href = 'teacherHome.html';
            },
            ToHomework(){
                window.location.href = 'homework.html';
            },
            selectCourse() {
                axios.get("/course").then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                    } else {
                        this.courseTableData = res.data.data;
                    }

                })
            },
            selectClass(){
                //获取班级信息
                axios.get("/class").then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                    } else {
                        this.ClassTableData = res.data.data;
                    }
                })
            }
        },
        mounted() {
            if(localStorage.getItem("user")==null){
               // window.location.href='login.html';
            }
            this.selectCourse();
            //this.selectClass();
        }
    })
</script>